<template>
  <div class="xcx_home_config">
    <div class="flex main">
      <div class="flex-1 left">
        <div class="m-auto model_wrap">
          <template v-for="(item, index) in sectionList">
            <div v-if="item.show" :key="index" class="section_wrap" :class="{ 'active': index + 1 == activeNum }" @click="activeNum = index + 1">
              <img class="block w-100" :src="require('../../../assets/images/xcx/' + item.imgName)" :alt="item.title">
              <div v-show="!item.show" class="flex flex-center w-100 h-100 hide_div">已隐藏</div>
            </div>
          </template>
        </div>
      </div>
      <div class="right">
        <div class="flex flex-between-center header">
          <h5 class="color-666 normal-font">{{ sectionList[activeNum - 1].title }}</h5>
          <div>
            <el-switch v-model="sectionList[activeNum - 1].show" active-color="#4ccb86" inactive-color="#ff4146" />
            <span class="v-middle" style="margin-left:10px">{{ sectionList[activeNum - 1].show ? "开启" : "隐藏" }}</span>
          </div>
        </div>
        <div class="main_form">
          <top-banner v-if="activeNum == 1" ref="topBanner" />  
          <nine-grid v-if="activeNum == 2" ref="nineGrid" />
          <capsule-banner v-if="activeNum == 3" ref="capsuleBanner" />
          <!-- 热销专区 -->
          <third-hot v-if="activeNum == 4" ref="thirdHot" />
          <!-- 电脑专区 -->
          <banner-col v-if="activeNum == 5" ref="bannerCol" />
          <!-- 特卖活动 -->
          <two-col-goods v-if="activeNum == 6" ref="twoColGoods" />
          <!-- 活动专区 -->
          <sec-banner v-if="activeNum == 7" ref="secBanner" />
          <!-- 苹果专区 -->
          <two-activity v-if="activeNum == 8" ref="twoActivity" />
          <!-- 四个商品 -->
          <category v-if="activeNum == 9" ref="category" />
        </div>
        <div class="text-center footer">
          <el-button style="width:200px" size="small" type="primary" @click="save">保存</el-button>
        </div>
      </div>
    </div>
    <div class="fix-footer-btns">
      <el-button v-if="$hasMethod('#preview')" size="small" @click="preview">预览</el-button>
      <el-button v-if="$hasMethod('#publish')" size="small" type="primary" @click="release">发布</el-button>
    </div>
  </div>
</template>
<script>
import topBanner from './child/topBanner'
import nineGrid from './child/nineGrid'
import capsuleBanner from './child/capsuleBanner'
import thirdHot from './child/thirdHot'
import bannerCol from './child/bannerCol'
import twoColGoods from './child/twoColGoods'
import secBanner from './child/secBanner'
import twoActivity from './child/twoActivity'
import category from './child/category'
// import { checkUrl } from '@/utils/validate'
import { saveParams, getParamsByType, releaseOnline, previewIndex } from '@/api/xcx'
export default {
  components: { topBanner, capsuleBanner, nineGrid, thirdHot, bannerCol, twoColGoods, secBanner, twoActivity, category },
  data() {
    return {
      activeNum: 1,
      sectionList: [
        {
          title: '首页轮播图片',
          show: true,
          imgName: '1.jpg'
        },
        {
          title: '分类',
          show: true,
          imgName: '2.jpg'
        },
        {
          title: '专区1',
          show: true,
          imgName: '3.jpg'
        },
        {
          title: '热销专区+专区一',
          show: true,
          imgName: '4.jpg'
        },
        {
          title: '电脑专区+专区二',
          show: true,
          imgName: '5.jpg'
        },
        {
          title: '特卖活动+专区三',
          show: true,
          imgName: '6.jpg'
        },
        {
          title: '活动专区',
          show: true,
          imgName: '7.jpg'
        },
        {
          title: '专区1',
          show: true,
          imgName: '8.jpg'
        },
        {
          title: '专区1商品',
          show: true,
          imgName: '9.jpg'
        }
      ]
    }
  },
  watch: {
    activeNum(val) {
      this.getParams(val)
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      previewIndex().then(res => {
        const showTypes = res.map(k => k.type)
        this.sectionList.forEach((item, index) => {
          const num = index + 1
          if (showTypes.indexOf(num) === -1) {
            // item.show = false
          }
        })
        this.getParams(1)
      })
    },
    preview() {
      this.$router.push({ name: 'xcxPosPreview' })
    },
    release() {
      releaseOnline().then(res => { })
    },
    // 获取数据
    getParams(type) {
      getParamsByType(type).then(res => {
        if (res) {
          // this.sectionList[this.activeNum - 1].show = res.status == 2;
          const data = JSON.parse(res.params)
          this.$nextTick(() => {
            type === 1 && (this.$refs.topBanner.bannerList = [...data])
            type === 2 && (this.$refs.nineGrid.iconList = [...data])
            type === 3 && (this.$refs.capsuleBanner.banner = data[0])
            type === 4 && (this.$refs.thirdHot.configData = data.main, this.$refs.thirdHot.$refs.colForm.goodsList = data.goods)
            if (type === 5) {
              this.$refs.bannerCol.carousel = data.carousel
              this.$refs.bannerCol.configData = [
                data.twoBar.one.main,
                data.twoBar.two.main
              ]
              this.$refs.bannerCol.$refs.colForm1.goods = data.twoBar.one.goods
              this.$refs.bannerCol.$refs.colForm2.goods = data.twoBar.two.goods
            }
            if (type === 6) {
              this.$refs.twoColGoods.configData = [
                data.one.main,
                data.two.main
              ]
              this.$refs.twoColGoods.$refs.colForm1.goodsList = data.one.goods
              this.$refs.twoColGoods.$refs.colForm2.goodsList = data.two.goods
            }
            type === 7 && (this.$refs.secBanner.bannerList = [...data])
            type === 8 && (this.$refs.twoActivity.imgList = [...data])
            type === 9 && (this.$refs.category.dataList = [...data])
          })
        }
      })
    },
    // 保存顶部导航栏
    saveTopBanner() {
      const list = [...this.$refs.topBanner.bannerList]
      if (this.validateBannerList(list)) {
        saveParams({ type: 1, status: this.sectionList[this.activeNum - 1].show ? 2 : 1, params: JSON.stringify(list) }).then(res => {
          this.getParams(1)
        })
      }
    },
    // 专区一商品
    saveCapsuleBanner() {
      const list = [this.$refs.capsuleBanner.banner]
      const list1 =[this.$refs.capsuleBanner.banner2]
      const list2 =[this.$refs.capsuleBanner.banner3]
      const list3 =this.$refs.capsuleBanner.list
      console.log(list3);
      if (this.validateBannerList1(list3)) {
        // saveParams({ type: 3, status: this.sectionList[this.activeNum - 1].show ? 2 : 1, params: JSON.stringify(list) }).then(res => {
        //   this.getParams(3)
        // })
      }
    },
    validateIcon(list) {
      for (const index in list) {
        const num = parseInt(index) + 1
        if ((!list[index].img) && (!list[index].title) && (!list[index].jumpUrl)) {
          return true
        }
        if (!list[index].img) {
          this.$message({
            message: `图标${num}的图片不能为空`,
            type: 'error'
          })
          return false
        }
        if (!list[index].title) {
          this.$message({
            message: `图标${num}的名称不能为空`,
            type: 'error'
          })
          return false
        }
        if (!list[index].jumpUrl) {
          this.$message({
            message: `图标${num}的ID不能为空`,
            type: 'error'
          })
          return false
        }
        // if (!checkUrl(list[index].jumpUrl)) {
        //   this.$message({
        //     message: `图标${num}的链接格式不正确`,
        //     type: 'error'
        //   });
        //   return false
        // }
      }
      return true
    },
    // 保存九宫格
    saveNineGrid() {
      const list = [...this.$refs.nineGrid.iconList]
      if (this.validateIcon(list)) {
        saveParams({ type: 2, status: this.sectionList[this.activeNum - 1].show ? 2 : 1, params: JSON.stringify(list) }).then(res => {
          this.getParams(2)
        })
      }
    },
    // 校验三栏式热门
    validateThirdHot({ main, goods }) {
      const { backgroundImg, title, subtitle } = main
      if (!backgroundImg) {
        this.$message({
          message: '请上传背景图',
          type: 'warning'
        })
        return false
      }
      if (!title) {
        this.$message({
          message: '主标题不能为空！',
          type: 'error'
        })
        return false
      }
      if (!subtitle) {
        this.$message({
          message: '副标题不能为空！',
          type: 'error'
        })
        return false
      }
      // if (!jumpUrl) {
      //   this.$message({
      //     message: '链接不能为空！',
      //     type: 'error'
      //   });
      //   return false
      // }
      // if (!checkUrl(jumpUrl)) {
      //   this.$message({
      //     message: '链接格式不正确',
      //     type: 'error'
      //   });
      //   return false;
      // }
      if (goods.length < 3) {
        this.$message({
          message: '添加商品个数不能少于3个！',
          type: 'error'
        })
        return false
      }
      return true
    },
    // 保存三栏式热门
    saveThirdHot() {
      const params = { main: this.$refs.thirdHot.configData, goods: this.$refs.thirdHot.$refs.colForm.goodsList }
      if (this.validateThirdHot(params)) {
        saveParams({ type: 4, status: this.sectionList[this.activeNum - 1].show ? 2 : 1, params: JSON.stringify(params) }).then(res => {
          this.getParams(4)
        })
      }
    },
    // 校验轮播图+二栏式
    validateBannerCol({ carousel, goods1,goods2,goods3 }) {
      console.log('ok!');
      if (carousel.length === 0) {
        this.$message({
          message: '请添加轮播图',
          type: 'warning'
        })
        return false
      }
      for (let index = 0; index < carousel.length; index++) {
        const num = index + 1
        if (!carousel[index].img) {
          this.$message({
            message: '请添加轮播图' + num + '的图片',
            type: 'warning'
          })
          return false
        }
        if (!carousel[index].jumpUrl) {
          this.$message({
            message: '请添加轮播图' + num + '的链接',
            type: 'warning'
          })
          return false
        }
      }
      if (!goods1.img) {
        this.$message({
          message: '请添加商品图片',
          type: 'warning'
        })
        return false
      }
      if (!goods1.jumpUrl) {
        this.$message({
          message: '请输入商品的链接',
          type: 'warning'
        })
        return false
      }
      if (!goods2.img) {
        this.$message({
          message: '请添加左侧商品图片',
          type: 'warning'
        })
        return false
      }
      if (!goods2.jumpUrl) {
        this.$message({
          message: '请输入左侧商品的链接',
          type: 'warning'
        })
        return false
      }
      if (!goods3.img) {
        this.$message({
          message: '请添加右侧商品图片',
          type: 'warning'
        })
        return false
      }
      if (!goods3.jumpUrl) {
        this.$message({
          message: '请输入右侧商品的链接',
          type: 'warning'
        })
        return false
      }
      return true
    },
    // 保存轮播图+二栏式
    saveBannerCol() {
      // console.log(this.$refs.bannerCol.carousel);
      const list=this.$refs.bannerCol.$refs.capsuleBanner.list
      const { carousel } = this.$refs.bannerCol
      const params = {
        carousel: carousel,
        goods1:list[0],
        goods2:list[1],
        goods3:list[2]
      }
      if (this.validateBannerCol(params)) {
        // saveParams({ type: 5, status: this.sectionList[this.activeNum - 1].show ? 2 : 1, params: JSON.stringify(params) }).then(res => {
        //   this.getParams(5)
        // })
      }
    },
    // 校验二栏式*2商品
    validateTwoColGoods({ one, two }) {
      if (!one.main.backgroundImg) {
        this.$message({
          message: '请添加二栏式1的背景图',
          type: 'warning'
        })
        return false
      }
      if (!one.main.title) {
        this.$message({
          message: '请输入二栏式1的主标题',
          type: 'warning'
        })
        return false
      }
      if (!one.main.subtitle) {
        this.$message({
          message: '请输入二栏式1的副标题',
          type: 'warning'
        })
        return false
      }
      if (!one.main.jumpUrl) {
        this.$message({
          message: '请输入二栏式1的链接',
          type: 'warning'
        })
        return false
      }
      // if (!checkUrl(one.main.jumpUrl)) {
      //   this.$message({
      //     message: '二栏式1的链接格式不正确',
      //     type: 'error'
      //   });
      //   return false;
      // }
      if (one.goods.length < 2) {
        this.$message({
          message: '请添加二栏式1的商品',
          type: 'warning'
        })
        return false
      }
      if (!two.main.backgroundImg) {
        this.$message({
          message: '请添加二栏式2的背景图',
          type: 'warning'
        })
        return false
      }
      if (!two.main.title) {
        this.$message({
          message: '请输入二栏式2的主标题',
          type: 'warning'
        })
        return false
      }
      if (!two.main.subtitle) {
        this.$message({
          message: '请输入二栏式2的副标题',
          type: 'warning'
        })
        return false
      }
      if (!two.main.jumpUrl) {
        this.$message({
          message: '请输入二栏式2的链接',
          type: 'warning'
        })
        return false
      }
      // if (!checkUrl(two.main.jumpUrl)) {
      //   this.$message({
      //     message: '二栏式2的链接格式不正确',
      //     type: 'error'
      //   });
      //   return false;
      // }
      if (two.goods.length < 2) {
        this.$message({
          message: '请添加二栏式2的商品',
          type: 'warning'
        })
        return false
      }
      return true
    },
    // 保存二栏式*2商品
    saveTwoColGoods() {
      const { configData } = this.$refs.twoColGoods
      const goods1 = this.$refs.twoColGoods.$refs.colForm1.goodsList
      const goods2 = this.$refs.twoColGoods.$refs.colForm2.goodsList
      const params = {
        one: {
          main: configData[0],
          goods: goods1
        },
        two: {
          main: configData[1],
          goods: goods2
        }
      }
      if (this.validateTwoColGoods(params)) {
        saveParams({ type: 6, status: this.sectionList[this.activeNum - 1].show ? 2 : 1, params: JSON.stringify(params) }).then(res => {
          this.getParams(6)
        })
      }
    },
    // 校验商品专区1
    validateBannerList1(list){
      console.log('list->',list[0]);
      if(list[0].img===''){
        this.$message({
          message: '请添加商品图片',
          type: 'warning'
        })
        return false
      }else if(list[1].img===''){
        this.$message({
          message: '请添加商品图片',
          type: 'warning'
        })
        return false
      }else if(list[2].img===''){
        this.$message({
          message: '请添加商品图片',
          type: 'warning'
        })
        return false
      }else {
        return true
      }
    },
    // 校验轮播图列表
    validateBannerList(list) {
      if (list.length === 0) {
        this.$message({
          message: '请添加轮播图',
          type: 'warning'
        })
        return false
      }
      for (let index = 0; index < list.length; index++) {
        const num = index + 1
        if (!list[index].img) {
          this.$message({
            message: '请添加轮播图' + num + '的图片',
            type: 'warning'
          })
          return false
        }
        if (!list[index].jumpUrl) {
          this.$message({
            message: '请添加轮播图' + num + '的链接',
            type: 'warning'
          })
          return false
        }
      }
      return true
    },
    // 保存次级轮播图
    saveSecBanner() {
      const list = [...this.$refs.secBanner.bannerList]
      if (this.validateBannerList(list)) {
        saveParams({ type: 7, status: this.sectionList[this.activeNum - 1].show ? 2 : 1, params: JSON.stringify(list) }).then(res => {
          this.getParams(7)
        })
      }
    },
    // 保存二栏式活动
    saveTwoActivity() {
      const { imgList } = this.$refs.twoActivity
      for (let index = 0; index < imgList.length; index++) {
        const num = index + 1
        if (!imgList[index].img) {
          this.$message({
            message: '请添加图片' + num + '的图片',
            type: 'warning'
          })
          return false
        }
        if (!imgList[index].jumpUrl) {
          this.$message({
            message: '请添加图片' + num + '的链接',
            type: 'warning'
          })
          return false
        }
        // if (!checkUrl(imgList[index].jumpUrl)) {
        //   this.$message({
        //     message: `图片${num}的链接格式不正确`,
        //     type: 'error'
        //   })
        //   return false
        // }
      }
      saveParams({ type: 8, status: this.sectionList[this.activeNum - 1].show ? 2 : 1, params: JSON.stringify(imgList) }).then(res => {
        this.getParams(8)
      })
    },
    // 校验品类商品推荐
    validateCategory(list) {
      for (let index = 0; index < list.length; index++) {
        const num = index + 1
        if (!list[index].main.title) {
          this.$message({
            message: '请添加推荐位' + num + '的主标题',
            type: 'warning'
          })
          return false
        }
        if (!list[index].main.img) {
          this.$message({
            message: '请添加推荐位' + num + '的一级推荐商品图片',
            type: 'warning'
          })
          return false
        }
        if (!list[index].main.jumpUrl) {
          this.$message({
            message: '请添加推荐位' + num + '的一级推荐商品链接',
            type: 'warning'
          })
          return false
        }
        if (list[index].goods.length < 3) {
          this.$message({
            message: '请添加推荐位' + num + '的二级推荐商品',
            type: 'warning'
          })
          return false
        }
      }
      return true
    },
    // 保存品类商品推荐
    saveCategory() {
      const { dataList } = this.$refs.category
      if (this.validateCategory(dataList)) {
        saveParams({ type: 9, status: this.sectionList[this.activeNum - 1].show ? 2 : 1, params: JSON.stringify(dataList) }).then(res => {
          this.getParams(9)
        })
      }
    },
    save() {
      switch (this.activeNum) {
        case 1:
          this.saveTopBanner()
          break
        case 2:
          this.saveNineGrid()
          break
        case 3:
          this.saveCapsuleBanner()
          break
        case 4:
          this.saveThirdHot()
          break
        case 5:
          this.saveBannerCol()
          break
        case 6:
          this.saveTwoColGoods()
          break
        case 7:
          this.saveSecBanner()
          break
        case 8:
          this.saveTwoActivity()
          break
        case 9:
          this.saveCategory()
          break
        default:
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.xcx_home_config {
  padding: 0;
}

.main {
  height: 73vh;
}

.left {
  padding: 30px;
  background-color: #f5f5f5;
  overflow: auto;
}

.right {
  width: 420px;
  overflow-y: auto;

  .header {
    padding: 15px;
    border-bottom: 1px solid #eeeeee;
  }

  .footer {
    padding: 15px 0;
    border-top: 1px solid #eeeeee;
  }
}

.model_wrap {
  width: 375px;

  &>div.active {
    border: 1px solid $mainBlue;
  }
}

.main_form {
  padding: 15px 20px;
}

.section_wrap {
  position: relative;
}

.hide_div {
  position: absolute;
  top: 0;
  left: 0;
  color: #ffffff;
  background: #000000;
  opacity: 0.5;
  font-size: 32px;
}
</style>
